// src/app/workspace/[workspaceId]/member/[memberId]/components/conversation.tsx
import React, {useEffect, useRef, useState} from 'react';
import {Conversation as ConversationType, Member, Message as MessageType} from "@/lib/social/types";
import {useMemberId} from "@/hooks/social/use-member-id";
import {useGetMember} from "@/features/members/api/use-get-member";
import {useGetMessages} from "@/features/messages/api/use-get-messages";
import {AlertTriangle, Loader} from "lucide-react";
import MessageList from "@/components/social/message-list";
import ChatInputConversation from "@/app/social/workspace/[workspaceId]/member/[memberId]/_components/chat-input";
import Header from "@/app/social/workspace/[workspaceId]/member/[memberId]/_components/header";
import {usePanel} from "@/hooks/social/use-panel";

interface Props {
    id: string
    // data: ConversationType
}

const Conversation = ({id}: Props) => {
    const memberId = useMemberId()

    const {onOpenProfile} = usePanel()

    const [member, setMember] = useState<Member>();
    const [isPending, setIsPending] = useState(false);
    const [messages, setMessages] = useState<MessageType[]>([]);
    const [status, setStatus] = useState<string>();

    const loadMoreRef = useRef<Function>(null)

    useEffect(() => {
        (async () => {
            const {data, isLoading} = await useGetMember({id: memberId})
            setMember(data)
            setIsPending(isLoading)
        })()
    }, [memberId]);
    useEffect(() => {
        (async () => {
            const {data, status: s, loadMode} = await useGetMessages({
                conversationId: id
            })
            setMessages(data)
            setStatus(s)
            // @ts-ignore
            loadMoreRef.current = loadMode
        })()
    }, [memberId]);

    if (isPending || status === 'loadingFirstPage')
        return <div className={`h-full flex-1 flex items-center
            justify-center flex-col gap-2`}>
            <Loader className={`size-5 animate-spin text-muted-foreground`}/>
        </div>

    // if (!messages || messages.length === 0) return <div>loading...</div>

    // let memberName = 'member' + Math.floor(Math.random())
    return (
        <div className={`flex flex-col h-full`}>
            <Header
                // @ts-ignore
                memberName={member?.user.name}
                // memberName={memberName}
                // memberImage={'https://picsum.photos/200'}
                // @ts-ignore
                memberImage={member?.user.image}
                onClick={() => onOpenProfile(memberId)}
            />
            {!messages || messages.length === 0 && <div className={'h-4 w-full'}/>}
            {messages && messages.length !== 0 && <MessageList
                data={messages}
                variant={'conversation'}
                // @ts-ignore
                memberImage={member?.user.image}
                // @ts-ignore
                memberName={member?.user.name}
                // memberImage={'https://picsum.photos/200'}
                // memberName={memberName}
                // @ts-ignore
                loadMore={loadMoreRef.current!}
                isLoadingMore={status === 'loadingMore'}
                canLoadMore={status === 'canLoadMore'}
            />}
            {/*显示不出来...*/}
            <ChatInputConversation
                // @ts-ignore
                placeholder={`Message ${member?.user.name}`}
                // placeholder={`Message ${memberName}`}
                conversationId={id}
            />
        </div>
    );
};

export default Conversation;